<template>
  <div id="box">
    <van-tabs v-model:active="active">
      <van-tab title="我的医生" id="myDoctor">
        <img
          src="https://cdn.moguvet.com/custom/front/d/mine/consultempty.png"
          style="width: 78%; height: 32%"
          alt=""
        />
        <p>暂无医生</p>
        <van-button
          style="
            border: none;
            background-color: #1ec7af;
            color: #fff;
            width: 130px;
            font-weight: bolder;
            border-radius: 10px;
            font-size: large;
          "
          plain
          type="success"
          @click="$router.push('/consult')"
          >找医生</van-button
        >
      </van-tab>
      <van-tab title="推荐医生">
        <DoctorList />
      </van-tab>
    </van-tabs>
  </div>
</template>
<script setup>
import { ref } from "vue";
import DoctorList from "./DoctorList.vue";
import { useRouter } from "vue-router";
let router = useRouter();

//tab标签切换索引
let active = ref(1);
</script>
<style scoped>
#box {
  width: 100%;
}
#myDoctor {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#myDoctor p {
  color: #909090;
  font-size: 28px;
  margin-bottom: 60px;
}
</style>